<template>
  <div ref="lineChartRef" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, markRaw, defineProps } from "vue";
import * as echarts from "echarts";

// 接收参数
const props = defineProps({
  title: String,
  unit: String,
  data: {
    type: Array as string[],
    default: {}
  }
});
const name = props.data.map(item => item.name);
const value = props.data.map(item => item.value);
const dataLength = props.data.length;
const title = props.title;
const unit = props.unit;

// 图表绘制逻辑
const lineChartRef = ref<HTMLDivElement | null>(null);
const lineChartRefInstance = ref<echarts.ECharts | null>(null);
const initBarOption = ref<echarts.EChartOption>({});

const color: string[] = [
  "#2b89f8",
  "#fa512a",
  "#00ffff",
  "#409B5C",
  "#ffe000",
  "#ffa800",
  "#ff5b00"
];
let toolTimer = ref<any>(null);
// let chartIcon = ``
initBarOption.value = {
  title: {
    show: false,
    text: "各科药品占比",
    left: "center",
    textStyle: {
      color: "#fff"
    }
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    },
    backgroundColor: "rgba(255,255,255,0.8)",
    borderColor: "rgba(255,255,255,0)",
    formatter: function (params) {
      const item = params[0];
      return `<p style="color: ${params[0].color}">${item.name}:${item.value}${unit}</p>`;
    }
  },
  grid: {
    top: "20%",
    left: "3%",
    right: "3%",
    bottom: "0%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: name,
    axisLine: {
      lineStyle: {
        color: "#ffffff"
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: "#fff",
      fontSize: 13
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "#182828"
      }
    }
  },
  yAxis: {
    name: title + "(" + unit + ")",
    type: "value",
    axisLine: {
      show: false,
      lineStyle: {
        color: "#ffffff"
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: "#ffffff",
      fontSize: 13
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "#182828"
      }
    }
  },
  color: ["#40c3c8"],
  series: [
    {
      data: value,
      type: "line",
      smooth: true,
      //要把折线图的拐点symbol隐藏掉；鼠标悬浮时会显示；label也会在有symbol的点展示
      showSymbol: true,
      z: 100,
      label: {
        show: true,
        position: "top",
        // distance: 10,
        formatter: fparam => {
          return `{a|${fparam.value}}`;
        },
        rich: {
          a: {
            // backgroundColor: {
            //   image: chartIcon
            // },
            width: 34,
            height: 34,
            align: "center",
            color: "#fff"
          }
        }
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#40c3c8" // 0% 处的颜色
            },
            {
              offset: 0.9,
              color: "#23B3F700" // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    }
  ]
};

const initLineChart = () => {
  if (lineChartRef.value) {
    lineChartRefInstance.value = markRaw(echarts.init(lineChartRef.value));
    lineChartRefInstance.value.setOption(initBarOption.value, true);
  }
};

// tooltip自动轮播 若使用请做销毁处理
if (initBarOption.value && typeof initBarOption.value === "object") {
  let index = 0;
  toolTimer.value = setInterval(function () {
    lineChartRefInstance.value.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: index
    });
    index++;
    if (index >= dataLength) {
      index = 0;
    }
  }, 3000);
}

// 挂载后动作 -- 初始化图表
onMounted(() => {
  initLineChart();
  // 图表自适应
  window.addEventListener("resize", () => {
    if (lineChartRefInstance.value) {
      lineChartRefInstance.value.resize();
    }
  });
});

// 销毁前动作 -- 销毁图表
onBeforeUnmount(() => {
  if (lineChartRefInstance.value) {
    lineChartRefInstance.value.dispose();
  }
  if (toolTimer.value) {
    clearInterval(toolTimer.value);
  }
});
</script>

<style scoped lang="scss"></style>
